@charset "utf-8"; 
.evt_wrp{position: relative; width: 100%; line-height: 1.2; letter-spacing: -1px;} 
.evt_wrp img{vertical-align: top;} 
.evt_wrp i{font-style: normal;}
.evt_wrp strong{font-weight: 900;}
.evt_wrp .ttl,
.evt_wrp .inner, 
.evt_wrp .ttl .small{position: relative; width: fit-content; margin: 0 auto;} 
.evt_wrp .ttl{padding-bottom: 50px;} 

.consult_form_container .inner .consult_form_title h2{display: none;}
.evt_wrp .consult_form_container .inner{padding: 20px 0 100px;}

.topbar{background: #11153c;}
.topbar ul{width: 1200px; margin: 0 auto; overflow: hidden;}
.topbar ul li{float: left; padding: 20px 0; width: 50%; font-size: 24px; color: #fff; text-align: center;}
.topbar ul li.on{background: #ecf3f2; color: #000;}
.topbar ul li a{display: block; width: 100%; height: 100%; color: #fff;}

.evt_wrp .visual{background: #ecf3f2; padding: 100px 0;}

.evt_wrp .list_horiz{width: fit-content; margin: 0 auto; text-align: center;}
.evt_wrp .list_horiz li{position: relative; display: inline-block; margin-right: 15px;}
.evt_wrp .list_horiz li:last-child{margin-right: 0;}
.evt_wrp .list_horiz li .arrow{position: absolute; top: 50%; right: -20%; transform: translate(-50%, -50%); z-index: 2;}

.evt_wrp * [class^="bg_"] {padding: 120px 0; position: relative;} 

.evt_wrp .bg_01{background: #6113d7;}
.evt_wrp .bg_02{background: #fff; padding-bottom: 0 !important;}
.evt_wrp .bg_03{background: #ecf3f2;}
.evt_wrp .bg_04{background: #fff; border-bottom: 1px solid #ccc;}
.evt_wrp .bg_01 .dungdung{margin-top: 60px;}
.evt_wrp .bg_04 .list_horiz{padding-bottom: 70px;}

.mo{display: none;}

.evt_wrp .dungdung{animation: updown 1s both infinite alternate;} 
.evt_wrp .blink{animation: blink 1.5s infinite;} 
.evt_wrp .up-on-scroll{transition: transform .7s, opacity 1.7s;} 

.evt_wrp .notice{width: 1138px; margin: 50px auto 0; border: 1px solid; font-size: 17px; padding: 30px 50px; line-height: 1.7; border-radius: 5px;} 
.evt_wrp .notice p{padding-left: 10px;} 
.evt_wrp .notice p::before{content: '\00B7'; margin: 0 5px 0 -10px;} 

@keyframes blink{0%{opacity: 1} 50%{opacity:.2} 100%{opacity:1}} 
@keyframes updown{ 0%{transform: translateY(-5px);} 100%{transform: translateY(5px);}} 

/* mo */
@media screen and (max-width: 760px){
    .evt_wrp .ttl{width: 90%; padding-bottom: 3%;}

    .evt_wrp .bg_01 .dungdung{margin-top: 0;}
    .evt_wrp .list_horiz li{width: 43%; margin-right: 10px;}
    .evt_wrp .list_horiz li .arrow{width: 15%;}

    .evt_wrp .bg_01 .inner{width: 70%;}
    .evt_wrp .bg_01 span{display: inline-block;}
}

@media screen and (max-width: 1024px){  
    .pc{display: none;}
    .mo{display: block;}

    .topbar ul{width: 100%;}
    .topbar ul li{padding: 10px 0; font-size: 17px;}

    .consult_form_container .inner{padding-top: 10px; text-align: left !important;}

    .evt_wrp * [class^="bg_"]{padding: 10% 0;}
    .evt_wrp .inner{text-align: center;}
    
    .evt_wrp .visual{padding: 5% 0;}
    .evt_wrp .visual .inner{width: 100%;}

    .evt_wrp .list_horiz li:nth-child(2) .arrow{display: none;}

    .evt_wrp .bg_04 .list_horiz{padding-bottom: 5%;}
    .evt_wrp .bg_04 .list_horiz li:nth-child(-n+2){margin-bottom: 10px;}
    .evt_wrp .bg_04 .list_horiz li:nth-child(even){margin-right: 0;}

    .evt_wrp .bg_03 .list_horiz{overflow-x: auto; white-space: nowrap; display: flex; align-items: center; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 4%;}
    .evt_wrp .bg_03 .list_horiz li{display: flex; flex-shrink: 0; width: 45%;}

    .evt_wrp .notice{width: 90%; padding: 5%; line-height: 1.25;}
    .evt_wrp .notice p{padding: 3px 0; font-size: 15px;}
}


@media screen and (min-width: 761px) and (max-width: 1024px){ 
    .topbar ul li{padding: 20px 0; font-size: 22px;}
    .evt_wrp .visual img{width: 100%;}
    .evt_wrp .ttl{width: 70%; padding-bottom: 3%;}
    .evt_wrp .bg_03 .list_horiz li{width: 38%;}
    .evt_wrp .bg_04 .list_horiz {width: 85%;}
    
    .evt_wrp .consult_form_container{padding-bottom: 60px;}
}

@media screen and (min-width: 1024px) and (max-width: 1099px){ 
    .evt_wrp .visual .inner{width: 88%}
    .evt_wrp * [class^="bg_"]{padding: 8% 0;}
    .evt_wrp .visual .pc{display: block;}
    .evt_wrp .visual .mo{display: none;}
    
    .evt_wrp .bg_01 .dungdung{margin: 20px 0 0 30px; width: 37%;}
    .evt_wrp .bg_01 .inner span{display: inline-block; width: 40%;}
    .evt_wrp .bg_02 .inner{width: 80%;}
}
